<template>
    <div class="home">
        <el-card class="card">
            <search :fromLab="fromLab" @onadd="addbtn()" />
        </el-card>
        <el-card class="table">
            <xtable :tabData="tablelab" :tableData="tableData" :page="page" @onEdit="edit" @onCurrent="current">
                <template v-slot:sex="scope">
                    <!-- {{ scope }} -->
                    <el-tag v-if="scope.scope.sex == 0" class="ml-2" type="success">男</el-tag>
                    <el-tag v-else-if="scope.scope.sex == 1" class="ml-2" type="success">女</el-tag>
                    <el-tag v-else class="ml-2" type="success">未知</el-tag>
                </template>
                <template v-slot:locked="scope">
                    <!-- {{ scope }} -->
                    <el-tag v-if="scope.scope.locked == 0" class="ml-2" type="success">正常</el-tag>
                    <el-tag v-else-if="scope.scope.locked == 1" class="ml-2" type="success">锁定</el-tag>
                    <el-tag v-else class="ml-2" type="success">未知</el-tag>
                </template>

            </xtable>
            
        </el-card>
        <xdialog ref="xdialogRef" :dialogLab="dialogLab" @formEmit="formEmit"></xdialog>
    </div>
</template>

<script setup>
import { ref , reactive} from 'vue';
import search from '../../../components/search/search.vue'
import xtable from "../../../components/table/table.vue"
import { userqueryAll,useradd,userdelete} from '../../../service/index'
import { fromLab } from "./config/search"
import { tablelab } from './config/table';
import {dialogLab} from './config/dialog'
import xdialog from '../../../components/dialog/dialog.vue'
let tableData = ref([])
let page = reactive({
    limit:10,
    offset:1,
    count:0
})
let xdialogRef = ref(null)
userqueryAll({
    limit:page.limit,
    offset:page.offset,
}).then(res=>{
    // console.log(res)
    tableData.value = res.data.rows
    page.count = res.data.count
    console.log(page)
})

const edit = (data, type) => {
    console.log(data.row.user_id, type)
    // type 0 修改 1 删除
    if(type == 0){
        console.log(type);
        xdialogRef.value.isformdata(data.row)
    }
    if(type == 1){
        userdelete({
            user_id:data.row.user_id
        }).then(res=>{
            console.log(res)
        })
    }
}
const current = (data)=>{
    // console.log(data)
    page = data
    userqueryAll({
    limit:page.limit,
    offset:page.offset,
}).then(res=>{
    tableData.value = res.data.rows
    page.count = res.data.count
    console.log(page)
})
}

const addbtn = () =>{
    console.log(xdialogRef.value)
    xdialogRef.value.isdialog()
}

// 添加用户数据
function formEmit(data){
    useradd(data).then(res=>{
        // console.log(res)
        current(page)
    })
}


</script>

<style lang="less" scoped>
.home {
    height: 100%;
}

.card {
    margin-bottom: 20px;
}

.table {
    // min-height: 100%;
    z-index: 1;
}
</style>